<template>
  <Category :disabled="showState === 1" />
  <el-card
    shadow="hover"
    :body-style="{ padding: '20px' }"
    :style="{ marginTop: '30px' }"
  >
    <SpuList v-if="showState === 0" @setState="setState" />
    <SpuForm v-if="showState === 1" @setState="setState" :spuInfo="spuInfo" />
    <SkuForm v-if="showState === 2" @setState="setState" :spuInfo="spuInfo" />
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from "pinia";
import SpuForm from "./components/SpuForm/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import SpuList from "./components/SpuList/index.vue";
import useAttrStore from "@/stores/attr";
import type { SpuInfoType } from "@/api/spu";
//拿到pinia中的三级分类数据
const attrStore = useAttrStore();
const { category3Id } = storeToRefs(attrStore);
//声明一个数据,控制视图中的哪一个组件渲染
//0代表Spu列表页 1代表添加和修改Spu页 2代表Sku添加页面
const showState = ref(0);
//保存完整的spuInfo数据,如果是新增,则把初始值传递给SpuForm组件,如果是编辑,则初始数据替换,然后传递给SpuForm组件
const spuInfo = ref<SpuInfoType>({
  category3Id: category3Id.value,
  description: "",
  spuName: "",
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: [],
});
//定义一个自定义事件函数用来修改去哪个视图或者传递值
const setState = (state: number, row?: SpuInfoType) => {
  showState.value = state;
  //接收到传递的row 判断是否存在row 如果存在则证明是想编辑spu 进行数据回填
  if (row) {
    //row 数据存在的话 是通过修改获得
    spuInfo.value = row;
  } else {
    //会残留之前的数据我们需要做清空
    spuInfo.value = {
      category3Id: category3Id.value,
      description: "",
      spuName: "",
      tmId: null,
      spuImageList: [],
      spuSaleAttrList: [],
    };
  }
};
</script>
